<template>
  <div class="songs-container">
    <!-- v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading" -->
    <div class="inner_box">
      <div class="tab-bar">
        <span class="item" :class="{ active: type == 0 }" @click="type = 0"
          >全部</span
        >
        <span class="item" :class="{ active: type == 7 }" @click="type = 7"
          >华语</span
        >
        <span class="item" :class="{ active: type == 96 }" @click="type = 96"
          >欧美</span
        >
        <span class="item" :class="{ active: type == 8 }" @click="type = 8"
          >日本</span
        >
        <span class="item" :class="{ active: type == 16 }" @click="type = 16"
          >韩国</span
        >
      </div>
      <!-- 底部的table -->
      <div class="scrollbox">
        <table
          class="el-table playlit-table"
          border="0"
          cellspacing="0"
          cellpadding="0"
          style="border: 0"
        >
          <thead>
            <th class="sort"></th>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th class="zj">专辑</th>
            <th class="time">时长</th>
          </thead>
          <tbody>
            <tr
              class="el-table__row"
              v-for="(item, index) in songs"
              :key="index"
              @click="playmusic(item)"
            >
              <td
                style="width: 50px;textAlign:center"
                class="tr_sort"
                v-html="index + 1 < 10 ? '0' + (index + 1) : index + 1"
              ></td>
              <td style="width: 80px">
                <div class="img-wrap">
                  <img :src="item.album.blurPicUrl + '?param=50y50'" alt />
                  <span class="iconfont icon-play"></span>
                </div>
              </td>
              <td style="padding:0px 15px">
                <div class="song-wrap">
                  <div class="name-wrap">
                    <span>{{ item.name }}</span>
                    <span v-if="item.mvid" class="iconfont icon-mv"></span>
                  </div>
                </div>
              </td>
              <td>{{ item.artists[0].name }}</td>
              <td class="td_zj" style="padding:0px 15px">
                {{ item.album.name }}
              </td>
              <td class="tr_time" style="width:80px;textAlign:center">
                {{ item.duration | formDate }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { MusicList } from "../../../../api/music"
export default {
  name: "songs",
  data() {
    return {
      type: 0,
      allsongs: [],
      csongs: [],
      osongs: [],
      rsongs: [],
      hsongs: [],
      songs: [],
      loading: true,
    }
  },
  watch: {
    type(newValue, oldValue) {
      this.loading = true
      this.type = newValue
      switch (this.type) {
        case 0:
          if (this.allsongs.length) {
            this.songs = Object.freeze(this.allsongs)
            this.loading = false
          } else {
            this.getSongs(this.allsongs)
          }
          break
        case 7:
          if (this.csongs.length) {
            this.songs = Object.freeze(this.csongs)
            this.loading = false
          } else {
            this.getSongs(this.csongs)
          }
          break
        case 96:
          if (this.osongs.length) {
            this.songs = Object.freeze(this.osongs)
            this.loading = false
          } else {
            this.getSongs(this.osongs)
          }
          break
        case 8:
          if (this.rsongs.length) {
            this.songs = Object.freeze(this.rsongs)
            this.loading = false
          } else {
            this.getSongs(this.rsongs)
          }
          break
        case 16:
          if (this.hsongs.length) {
            this.songs = Object.freeze(this.hsongs)
            this.loading = false
          } else {
            this.getSongs(this.hsongs)
          }
      }
    },
  },
  filters: {
    formDate(date) {
      var m = parseInt(date / 1000 / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt((date / 1000) % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
  created() {
    this.getSongs(this.allsongs)
  },
  methods: {
    // 获取排行榜的音乐
    async getSongs(array) {
      const res = await MusicList({
        type: this.type,
      })
      //对请求的数据进行切割,减少数据量
      // var result = res.data.slice(0, 30)
      var result = res.data
      switch (this.type) {
        case 0:
          this.allsongs = Object.freeze(result)
          break
        case 7:
          this.csongs = Object.freeze(result)
          break
        case 96:
          this.osongs = Object.freeze(result)
          break
        case 8:
          this.rsongs = Object.freeze(result)
          break
        case 16:
          this.hsongs = Object.freeze(result)
      }
      this.songs = Object.freeze(result)
      this.loading = false
    },
    // 点击播放歌曲
    async playmusic(item) {
      this.$store.dispatch("getSong", { id: item.id, autoplay: true })
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";
.songs-container {
  padding-top: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
  .inner_box {
    width: 100%;
    max-width: 1200px;
  }
}
.songs-container .tab-bar {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tab-bar .item {
  font-size: 15px;
  color: gray;
  margin-right: 20px;
  cursor: pointer;
}

.songs-container .scrollbox {
  height: calc(100% - 50px) !important;
  position: relative;
}
.songs-container .scrollbox .el-table {
  margin: 0px 20px;
  width: calc(100% - 40px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
td {
  border: none;
}

.songs-container .song-table .song-wrap > span {
  margin-top: 20px;
  display: inline-block;
  color: #bebebe;
}

.icon-mv {
  padding-left: 5px;
  color: $primary;
}

.img-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
  .icon-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    color: rgb(98, 158, 218);
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
  }

  .icon-play::before {
    transform: translateX(1px);
  }
}
tr {
  transition: 0.5s;
}
.time {
  text-align: center;
}
tr:hover .icon-play {
  opacity: 1;
}
tr:hover {
  cursor: pointer;
  background: rgb(236, 236, 236);
}

/deep/ table {
  background-color: transparent;
}
.active {
  color: $primary !important;
}
</style>
